<template>
        <h4>child</h4>
        <div @click="paramsToParent">来自parent的值：{{data}}---{{name}}</div>
</template>
    
<script setup lang='ts'>
    // 父传子---------

import { reactive } from "@vue/reactivity";

    // ts方式接收值
    type props = {
        data?: number[],
        name?: string
    }
    // defineProps<props>();
    // 设置默认值
    withDefaults(defineProps<props>(), {
        data: () => [4, 4, 4],
        name: 'lisi'
    });


    // 非ts写法
    // defineProps({
    //     data: {
    //         type: Array,
    //         default: () => [5, 5, 5, 5]
    //     },
    //     name: {
    //         type: String,
    //         default: 'wangwu'
    //     }
    // });



    // 子传父
    let emit = defineEmits(['myClick']);
    let paramsToParent = () => {
        console.log('paramsToParent:');
        let ok = 'ok---fromchild';
        emit("myClick", ok);
    };


    // 子组件暴露给父组件内部属性 通过defineExpose
    let childObj = reactive({
        name: 'childname',
        age: 19
    });
    let childMethod = () => {
        console.log('childMethod');
    }
    defineExpose({
        childObj,
        childMethod
    })

</script>
    
<style>
</style>